<template>
    <div>
        <el-form
                ref="loginFormRef"
                :model="loginForm"
                :rules="phoneRules"
                class="demo-ruleForm"
        >
            <el-form-item prop="phone">
                <el-input size="large" v-model="loginForm.phone" >
                    <template #prefix>
                        <el-icon>
                            <User />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="msg_code">
                <el-input size="large" v-model="loginForm.msg_code">
                    <template #prefix>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                    <template #suffix>
                        <span class="msg_code" slot="append">
                        <tencent-captcha :phone="loginForm.phone" :phoneRule="validatePhone" scene="1"
                                         class="rule-password">
                        </tencent-captcha>
                    </span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <div class="unKnowPassWord">
<!--                    <span>忘记密码?</span>-->
                </div>
            </el-form-item>
            <el-form-item>
                <el-button size="large" class="login-submit-button" type="primary" @click="submitForm(loginFormRef)"
                >登录</el-button
                >
<!--                <el-button @click="resetForm(loginFormRef)">Reset</el-button>-->
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import Cookies from 'js-cookie'
    import TencentCaptcha from "../../../components/TencentCaptcha/TencentCaptcha";
    import {phone_login} from "../../../request/api";
    import { reactive, ref,toRefs,onMounted} from 'vue'
    import {ElMessage} from "element-plus";
    import {useRouter} from "vue-router";
    import {useStore} from 'vuex'
    export default {
        name: "index",
        setup(){
            let data = reactive({
                loginFormRef:null,
                loginForm:{
                    phone:'',
                    msg_code:''
                }
            })
            let router = useRouter();
            let store = useStore();
            const validatePhone = (rule,value,callback) => {
                let phoneRule = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
                if (value === '') {
                    callback(new Error('手机号码不能为空'))
                } else if (!phoneRule.test(value)) {
                    callback(new Error("手机号码格式错误"))
                } else {
                    callback()
                }
            }
            const validateCode = (rule,value,callback) => {
                if (value === '') {
                    callback(new Error('验证码不能为空'))
                } else if (value.length < 4) {
                    callback(new Error("验证码长度为4位长度"))
                } else {
                    callback()
                }
            }
            const phoneRules = reactive({
                phone: [{ validator: validatePhone, trigger: 'blur' }],
                msg_code: [{ validator: validateCode, trigger: 'blur' }],
            })

            const submitForm = (formEl) => {
                if (!formEl) return
                formEl.validate((valid) => {
                    if (valid) {
                        phone_login(data.loginForm).then(res =>{
                            console.log(res);
                            store.commit('setToken', res.token);
                            Cookies.set("token", res.token);
                            router.push('/home')
                        }).catch(err =>{
                            ElMessage({
                                type:'error',
                                message:err.msg
                            })
                        })
                    } else {
                        console.log('error submit!')
                        return false
                    }
                })
            }

            const resetForm = (formEl) => {
                if (!formEl) return
                formEl.resetFields()
            }
            document.onkeydown = function (e) {
                let key = window.event.keyCode;
                if (key == 13) {
                    submitForm(data.loginFormRef)
                }
            };
            return{
                validatePhone,
                ...toRefs(data),
                submitForm,
                resetForm,
                phoneRules
            }
        },
        components:{
            TencentCaptcha
        }
    }
</script>

<style scoped>
.msg_code:hover{
    color: dodgerblue;
}
    .login-submit-button{
        width: 100%;
        background-color: rgba(0, 84, 254, 1);
    }
    .unKnowPassWord{
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    .unKnowPassWord span{
        color: rgba(102, 102, 102, 1);
        letter-spacing: 0.18px;
        text-decoration: underline;
    }
</style>
